<template>
  <div>
    <van-nav-bar
        class="add-nav-bg"
        :title="$t('databaseManagement.t17')"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-field
        v-model="userName"
        center
        clearable
        name="userName"
        :label="$t('databaseManagement.t18')"
        :placeholder="$t('databaseManagement.t19')"
    >
      <template #button>
        <van-button size="small" type="primary" @click="addRowList">{{ $t('databaseManagement.t20') }}</van-button>
      </template>
    </van-field>
    <van-form @submit="onSubmit">
      <div style="margin: 0 15px">
        <van-collapse v-model="activeNames">
          <div v-for="(item, index) in dataList">
            <van-collapse-item :title="item.userName" :name="index">
              <van-field name="isGrant" :label="$t('databaseManagement.t21')">
                <template #input>
                  <van-checkbox v-model="item.isGrant" shape="square" />
                </template>
              </van-field>
              <van-field name="isRewardForward" :label="$t('databaseManagement.t22')">
                <template #input>
                  <van-checkbox v-model="item.isRewardForward" shape="square" />
                </template>
              </van-field>
              <van-field name="isRewardReverse" :label="$t('databaseManagement.t23')">
                <template #input>
                  <van-checkbox v-model="item.isRewardReverse" shape="square" />
                </template>
              </van-field>
              <van-field name="isPunishmentForward" :label="$t('databaseManagement.t24')">
                <template #input>
                  <van-checkbox v-model="item.isPunishmentForward" shape="square" />
                </template>
              </van-field>
              <van-field name="isPunishmentReverse" :label="$t('databaseManagement.t25')">
                <template #input>
                  <van-checkbox v-model="item.isPunishmentReverse" shape="square" />
                </template>
              </van-field>
              <van-field name="isExport" :label="$t('databaseManagement.t26')">
                <template #input>
                  <van-checkbox v-model="item.isExport" shape="square" />
                </template>
              </van-field>
              <van-field name="isImport" :label="$t('databaseManagement.t27')">
                <template #input>
                  <van-checkbox v-model="item.isImport" shape="square" />
                </template>
              </van-field>
            </van-collapse-item>
          </div>
        </van-collapse>
      </div>
      <div style="margin: 16px;">
        <van-button round block class="add-btn" native-type="submit">
          {{ $t('databaseManagement.t28') }}
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Form, Field, CellGroup, Button, NavBar, Checkbox, Collapse, CollapseItem } from 'vant';
import {authDatabase, authQuery} from "../../api/database";

export default {
  components: {
    [NavBar.name]: NavBar,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Checkbox.name]: Checkbox,
    [CellGroup.name]: CellGroup,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem
  },

  data () {
    return {
      userName: '',
      activeNames: [0],
      dataList: []
    }
  },
  created() {
    this.getUserInfo()
  },

  methods: {
    onSubmit () {
      let self = this
      const params = {
        dbName: this.$route.query.dbName,
        rows: this.dataList
      }
      authDatabase(self, params).then(response => {
        console.log(response.data)
      }).catch(function (error) {
        // console.log(error)
        return error
      })
    },

    getUserInfo () {
      let self = this
      const params = {
        dbName: this.$route.query.dbName,
        // UserName: this.$route.query.dbAlias
      }
      authQuery(self, params).then(response => {
        console.log(response.data)
        this.dataList = response.data.rows
      }).catch(function (error) {
        // console.log(error)
        return error
      })
    },

    addRowList() {
      this.userName && this.dataList.push({
        userName: this.userName,
        isGrant: false,
        isRewardForward: false,
        isPunishmentForward: false,
        isRewardReverse: false,
        isPunishmentReverse: false,
        isImport: false,
        isExport: false
      });
    },

    onClickLeft () {
      history.back();
    }
  }
};
</script>

<style lang="less">
.add {
  &-nav-bg {
    margin-bottom: 15px;
    //background: #4293F4;
    box-shadow: 0 0 25px #cac6c6;
  }

  &-btn {
    color: #fff;
    background-color: #4293F4;
    border: 1px solid #4293F4;
  }
}
</style>
